html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
input,
img,
button {
  outline-style: none;
  border: none;
}
.clearfix {
  overflow: hidden;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.container {
  width: 100%;
  height: 100%;
  background: url(../images/login/bg.png) center no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

form#fm1 {
	margin-top: -30px\0;
}
:root form#fm1 {
	margin-top: -55px;
}
.container .login {
  background-color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  behavior:url(PIE.htc);
  text-align: center;
  border-radius: 30px;
  width: 420px;
  margin-left: -210px\0;
  margin-top: -232px\0;
  padding: 30px 28px;
  box-sizing: border-box;
}

:root .container .login {
	margin: 0;
}

div.inputBox {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
span.icon.key {
	margin-right: 10px!important;
}

form input {
  height: 40px;
  width: 188px;
  font-size: 14px;
}
form input[type='checkbox'] {
  width: unset;
  background-color: #fff;
}
form .com {
  height: 25px;
  line-height: 25px;
  font-weight: 700;
  font-size: 14px;
  color: #5c5c5c;
  font-family: PT serif;
}
@media screen and (max-width: 410px) {
  .container .login {
    width: 80%;
  }
  section.row {
  	width: 82%;
  }
  form span.icon {
  	margin-right: 0;
  }
  form input#password {
    width: 80%;
  }
  form input[type=checkbox] {
    margin-top: 2px;
  }
}
@media screen and (max-width: 410px) {
  .container .com {
    font-size: 80%;
  }
  form span.icon {
  	margin-right: 0;
  }
 section.row {
  	width: 82%;
  }
  form input#password {
    width: 80%;
  }
}
@media screen and (max-width: 410px) {
  .container .com {
    font-size: 1px;
    font-weight: 400;
  }
  form span.icon {
  	margin-right: 0;
  }
 section.row {
  	width: 80%;
  }
  form input {
    width: 50%;
    font-size: 6px;
  }
  form input#password {
    width: 80%;
  }
  form input.code-text {
    width: 40%;
  }
}
.login .logo {
  display: block;
  margin: 0 auto;
  margin-bottom: 40px;
  width: 141px;
}

.line {
  background-color: #eeeeee;
  height: 1px;
  width: 100%;
  margin: 18px 0;
  margin-top: 10px;
}
.tip {
  display: inline-block;
  padding: 22px;
  padding-bottom: 0;
  margin-bottom: 0;
  box-sizing: border-box;
  width: 200px;
  text-align: center;
  background-color: #fff;
  font-size: 16px;
  color: #8a8a8a;
  position: absolute\0;
  top: 70px\0;
  left: 50%\0;
  margin-left: -100px\0;
  transform: translateY(-54px);
  -webkit-transform: translateY(-54px);
  -moz-transform: translateY(-54px);
  -ms-transform: translateY(-54px);
  -o-transform: translateY(-54px);
  behavior:url(PIE.htc);
}
:root .tip {
	position: static;
	margin-left: 0;
}
form {
  padding: 15px 0;
  box-sizing: border-box;
}
form.login-form {
  margin-top: -55px;
}
form .icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 25px;
  height: 40px;
}

form .icon.user {
  background: url(../images/user.png) center no-repeat;
}
form .icon.pwd {
  background: url(../images/pwd.png) center no-repeat;
}
form .icon.code {
  background: url(../images/code.png) center no-repeat;
}
form .icon.key {
  background: url(../images/key.png) center no-repeat;
}
form .code-img {
  display: inline-block;
  cursor: pointer;
  /* background: url(../images/login/code-img.png) center no-repeat; */
  overflow: hidden;
  width: 100px;
  height: 40px;
  border: 1px solid #eeeeee;
  margin-top: -7px;
  border-radius: 2px;
}
.autologin {
  color: #5c5c5c;
  font-size: 13.3px;
}
.forget {
  font-size: 13.3px;
  color: #038dd6;
  text-decoration: underline;
  cursor: pointer;
}
.login-button {
  width: 200px;
  height: 40px;
  margin-top: 16px;
  background-color: #4f93fe;
  border: 1px solid #1a72fe;
  border-radius: 50px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  font-family: 'PingFang SC';
  text-shadow: 0px 2px 1.96px rgba(0, 0, 0, 0.5);
}
.reset .info {
  color: #5c5c5c;
  font-size: 14px;
  margin-top: -54px;
  text-align: left;
}
.reset .submit {
  width: 69px;
  height: 28px;
  font-size: 14px;
  color: #fff;
  border-radius: 50px;
  background-color: #28a745;
  border: 1px solid #188e33;
  margin-top: 20px;
  cursor: pointer;
  
}
.reset .cancel {
  width: 69px;
  height: 28px;
  font-size: 14px;
  color: #fff;
  border-radius: 50px;
  background-color: #dc3545;
  border: 1px solid #bf1e2d;
  margin-left: 10px;
  margin-top: 20px;
  cursor: pointer;
}
.newpwd p.tip {
  width: unset;
}
.newpwd .code1 {
  background: url(../images/pwd.png) center no-repeat;
}
.newpwd .code2 {
  background: url(../images/pwd2.png) center no-repeat;
}
.tip-error {
  text-align: left;
  padding-left: 35px;
  box-sizing: border-box;
  color: #5c5c5c;
  font-size: 14px;
  margin-bottom: 0;
}
.error-bar {
  opacity: 0;
  transition: all 0.5s ;
  behavior:url(PIE.htc);
}
.error-bar.active {
  opacity: 1;
}
.success .success-img {
  display: block;
  margin: 0 auto;
  margin-top: -50px;
}
.success p {
  font-size: 14px;
  color: #5c5c5c;
  font-family: 'Microsoft YaHei';
}
.success .tip {
  font-size: 16px;
  color: #8a8a8a;
}